import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class ColosAPage extends StatefulWidget {
  const ColosAPage({Key? key}) : super(key: key);

  @override
  State<ColosAPage> createState() => _ColosAPageState();
}

class _ColosAPageState extends State<ColosAPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("颜色"),
      ),
      body: Container(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 20),
        child: SingleChildScrollView(
          child: childBody(),
        ),
      ),
    );
  }

  childBody() => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          columnView(
              text: "主色 Brand",
              bgColor: YJColors.THEME_COLOR,
              lText: "",
              lBgColor: YJColors.TRANSPARENT),
          columnView(
              text: "线条色 Line",
              bgColor: YJColors.LINE_COLOR,
              lText: "",
              mColor: Colors.black87,
              lBgColor: YJColors.TRANSPARENT),
          columnView(
              text: "背景色 Background",
              bgColor: YJColors.BACKGROUND_COLOR,
              mText: "背景色",
              lText: "",
              mColor: Colors.black87,
              lBgColor: YJColors.TRANSPARENT),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: TextView.text("功能色", fontWeight: FontWeight.w600),
          ),
          columnView(
              text: "成功 Success",
              bgColor: YJColors.SUCCESS,
              lBgColor: YJColors.LIGHT_SUCCESS),
          columnView(
              text: "提醒 Notice",
              bgColor: YJColors.NOTICE,
              lBgColor: YJColors.LIGHT_NOTICE),
          columnView(
              text: "警示 Warning",
              bgColor: YJColors.WARNING,
              lBgColor: YJColors.LIGHT_WARNING),
          columnView(
              text: "文字连接 infoLink",
              bgColor: YJColors.INFOLINK,
              lBgColor: YJColors.LIGHT_INFOLINK),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: TextView.text("文本颜色TextColor"),
          ),
          columnView(
              text: "强调/正文标题",
              mText: '深色背景',
              mColor: YJColors.BLACK85,
              lColor: YJColors.WHITE,
              bgColor: YJColors.WHITE,
              lBgColor: YJColors.BLACK),
          columnView(
              text: "次强调/正文标题",
              mText: '深色背景',
              mColor: YJColors.BLACK65,
              lColor: YJColors.WHITE80,
              bgColor: YJColors.WHITE,
              lBgColor: YJColors.BLACK),
          columnView(
              text: "次要信息",
              mText: '深色背景',
              bgColor: YJColors.WHITE,
              lBgColor: YJColors.BLACK,
              mColor: YJColors.BLACK45,
              lColor: YJColors.WHITE60),
          columnView(
              text: "提示字",
              mText: '深色背景',
              bgColor: YJColors.WHITE,
              lBgColor: YJColors.BLACK,
              mColor: const Color(0xFFC9CDD4),
              lColor: YJColors.WHITE40),
          const SizedBox(height: 35),
        ],
      );

  Column columnView({
    String? text,
    Color? bgColor,
    Color? lBgColor,
    String? mText = "常规",
    Color? mColor = Colors.white,
    String? lText = "浅色背景",
    Color? lColor = Colors.black87,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextView.text(text),
        Row(
          children: [
            Container(
              width: 120,
              height: 50,
              color: bgColor,
              alignment: Alignment.center,
              child: TextView.text(mText,
                  color: mColor, alignment: Alignment.center),
            ),
            const SizedBox(width: 10),
            Container(
              width: 120,
              height: 50,
              color: lBgColor,
              alignment: Alignment.center,
              child: TextView.text(lText,
                  color: lColor, alignment: Alignment.center),
            ),
          ],
        ),
        const SizedBox(height: 10),
      ],
    );
  }
}
